<template>
  <div v-show="editShow">
    <div class="container">
      <el-row :gutter="20">
        <div class="clearfix">
          <div class="crumbs">
            <i class="el-icon-back"></i>
            <el-button type="text" @click="goBack">返回</el-button>
          </div>
          <div class="btn-save">
            <el-button type="primary" @click="saveClick('ruleForm')">保存</el-button>
          </div>
        </div>
        <div class="form-box">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="eidt-el-form"
          >
            <UploadImg @uploadImg="getUploadImg" :editImg="editImg"></UploadImg>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="用户角色" prop="roles">
              <el-select v-model="ruleForm.roles" placeholder="请选择角色">
                <el-option
                  v-for="(item,index) in roles"
                  :label="item.name"
                  :value="item.name"
                >
                  <div >{{item.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目类型">
              <el-select v-model="projectTypeId" placeholder="请选择项目类型">
                <el-option
                  v-for="(item,index) in productType"
                  :label="item.name"
                  :value="item.projectTypeId"
                >
                  <div @click="getChangeType(item)">{{item.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前项目">
              <el-select v-model="projectId" placeholder="当前项目">
                <el-option
                  v-for="(item,index) in product"
                  :label="item.name"
                  :value="item.projectId"
                >
                  <div @click="getChangeProduct(item)">{{item.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目角色">
              <el-select v-model="projectRoleId" placeholder="项目角色">
                <el-option
                  v-for="(item,index) in projectRole"
                  :label="item.name"
                  :value="item.projectRoleId"
                >
                  <div @click="getChangeProductRole(item)">{{item.name}}</div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-radio-group v-model="ruleForm.enabled" @change="getRadio">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import UploadImg from "./uploadImg/UploadImg";
import checkPhone from "../common/checkPhone";
import { log } from 'util';

export default {
  name: "editprojectmanage",
  data() {
    return {
      rules: {
        roles: { required: true, message: "请选择角色", trigger: "blur" },
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        email: [
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" }
        ]
      },
      ruleForm: {
        avatar: "",
        name: "",
        password: "",
        phone: "",
        email: "",
        roles: "",
        projectId: "",
        projectRoleId: "",
        enabled: 0,
        project:""
      },
      roles:[
        {
            "name":"超级管理员"
        },
        {
            "name":"项目经理"
        },
        {
            "name":"主办方"
        },
        {
            "name":"项目执行"
        }
      ],
      projectTypeId: "",
      projectId: "",
      projectRoleId: "",
      editImg: "",
      account_id: "",
      dataList: [],
      productType: [],
      product: [],
      projectRole: []
    };
  },
  props: {
    editShow: {
      type: Boolean,
      default: false
    },
    arrarList: {
      type: Array,
      default() {
        return [];
      }
    },
    editData: {
      type: Object
    }
  },
  watch: {
    editData: function() {
      const item = this.editData;
      this.ruleForm = {
        name: item.name,
        password: item.password,
        phone: item.phone,
        email: item.email,
        enabled: item.enabled,
        projectId: item.projectId,
        projectRoleId: item.projectRoleId,
        roles: item.roles,
        project: item.project,
      };
      this.account_id = item.accountId;
      this.editImg = item.avatar;
      this.projectId=item.projectId;
      this.projectRoleId=item.projectRoleId;
      
        this.$axios
          .get(`/Project/`)
          .then(res => {
            if (res.data.hasError == false) {
              this.product = [...res.data.data];
              if (this.product.length==0){
                this.projectId=""
                this.projectRole=[];
                this.projectRoleId="";
              }else if(this.projectId!=""){
                this.product.forEach(element => {
                  if(element.projectId==item.projectId){
                    this.projectTypeId=element.projectTypeId;
                  }
                });
              }
            }
          });
          this.getProductRole();
    }
  },
  created() {
    this.getProductType();
  },
  methods: {
    saveClick(ruleForm) {
      this.ruleForm = {
        avatar: this.ruleForm.avatar,
        name: this.ruleForm.name,
        password: this.ruleForm.password,
        phone: this.ruleForm.phone,
        email: this.ruleForm.email,
        projectId: this.projectId,
        projectRoleId: this.projectRoleId,
        enabled: this.ruleForm.enabled,
        project: this.ruleForm.project,
        roles: this.ruleForm.roles
      };
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.account_id == "" || this.account_id == undefined) {
            for (let i = 0; i < this.arrarList.length; i++) {
              let phone = this.arrarList[i].phone;
              if (phone == this.ruleForm.phone) {
                this.$message.error("该手机号已经存在");
                return false;
              }
            }
            this.$axios.post("/Account/", this.ruleForm).then(res => {
              if (res.data.hasError == false) {
                this.$message.success("保存成功！");
                this.goBack();
              } else {
                this.$message.error("保存失败！");
              }
            });
          } else {
            this.$axios
              .put("/Account/" + this.account_id + "", this.ruleForm)
              .then(res => {
                if (res.data.hasError == false) {
                  this.$message.success("编辑成功！");
                  this.goBack();
                } else {
                  this.$message.error("编辑失败！");
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    getRadio(value) {
      this.ruleForm.enabled = value;
    },
    goBack() {
      this.$emit("backFunStu");
      this.$refs['ruleForm'].resetFields();
      this.editImg="";
      this.account_id="";
      this.projectTypeId="";
      this.projectRoleId="";
    },
    getUploadImg(imgSrc) {
      this.ruleForm.avatar = imgSrc;
    },
    getProductType() {
      this.$axios.get("/ProjectType/").then(res => {
        if (res.data.hasError == false) {
          this.productType = [...res.data.data];
        }
      });
    },
    getProduct() { 
        this.$axios
          .get(`/Project/ProjectType/${this.projectTypeId}`)
          .then(res => {
            if (res.data.hasError == false) {
              this.product = [...res.data.data];
              if (this.product.length==0){
                this.projectId=""
                this.projectRole=[];
                this.projectRoleId="";
              }
            }
          }); 
    },
    getProductRole() {
      this.$axios.get(`/ProjectRole/Project/${this.projectId}`).then(res => {
        if (res.data.hasError == false) {
          this.projectRole = [...res.data.data];
        }
      });
    },
    getChangeType(item) {
      this.projectTypeId = item.projectTypeId;
      this.getProduct();
      this.projectId=""
      this.projectRoleId="";
    },
    getChangeProduct(item) {
      this.projectId = item.projectId;
      this.ruleForm.project=item.name;
      this.projectTypeId=item.projectTypeId;
      this.getProductRole();
    },
    getChangeProductRole(item) {
      this.projectRoleId = item.projectRoleId;
    }
  },
  components: {
    UploadImg
  }
};
</script>